<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="<?=HW_JS?>plugins/mobileDate/js/jquery.min.js"></script>
    <style type="text/css">
    ul{ margin:0; padding:0; font-size:14px }
    .main{ padding: 10px; }
    .top_head{ width: 100%; height: 32px; border-bottom:1px solid #ddd;}
    .top_head ul li{ float: left; width: 80px; text-align: center; line-height: 32px; background: EFEFEF; border: 1px solid #EEEEEE; margin-right: 5px; border-bottom: 0px}
    .many { /*display: none;*/ min-height: 290px; }
    .signle{ display: none; height: 220px}
    .btn,.many .button{ width: 100px; height: 30px; float: left; line-height: 30px; text-align: center; background: #00b7ee; border-radius: 4px; color: #fff; font-size: 18px; cursor: pointer; margin-right: 10px; border: 1px solid #999; margin-bottom: -2px}
    .many .button:nth-child(1){background: #fff; color: #333;}
    .state li{ float: right; height: 30px; border:1px solid #999; text-align: center; line-height: 30px; width: 94px; margin-left: 10px}
    .imgs{ height:220px; overflow-y: scroll; /*border: 1px solid #999;*/ margin-bottom: 15px; padding: 0 4px;}
    .imgs div{position: relative; width: 100px; height: 100px; float: left; margin-right: 10px; margin-top:10px; overflow: hidden;}
    .imgs span{display: block; position: absolute; left: 0; top:0; width: 100px; height: 100px; border: 1px}
    .imgs i{position: absolute; display: block; top: 0; right: 0; width: 20px; color: transparent; height: 20px; z-index: 100;font-weight: bold; text-align: right; font-size: 16px; font-style: normal; cursor: pointer;}
    .imgs div:hover i{ background: rgba(0,0,0,.3); color: #FFF}
    #span_show { height: 120px; width: 120px; margin: 10px auto }
   #span_show img,.imgs span img{width: 100%; height: 100%}
    input{opacity: 0; filter: alpha(opacity=0);}

    .online{display: none}
    .online ul { overflow: hidden; } 
    .online ul li { float: left; padding: 5px 5px; position: relative; }
    .online ul li img{ width: 100px; height: 100px }
    .page{ margin-top: 20px; }
    .page span{ float: right; padding: 5px 10px; margin-left: 10px; border: 1px solid #eee; }
    .page span.fl{ float: left; padding: 5px 15px; border: 1px solid #eee; background: #00b7ee; border-radius: 4px; color: #FFF}
    .mudle {position: absolute; height: 100px; line-height: 100px; text-align: center; width: 100px; top: 5px; left: 5px; background: rgba(0,0,0,.3); font-size: 24px; font-weight: bold; color: #FFF;}
    .show{display: block;}
    .hide{ display: none }
    .blank{ background: #FFF; border-bottom: 0; }
    .gray{ background: #EFEFEF; border-bottom: 1px solid #EFEFEF }

    .wait { width: 200px; height: 100px; position: fixed; background: rgba(0,0,0,.4); font-size: 18px; text-align: center; top: 150px; left: 190px; border-radius: 4px; line-height: 100px; color: #FFF}
    </style>
</head>
<body>
<div class="main">
    <div class="top_head">
        <ul>
            <li class="gray" onclick="show_one($(this))">单图上传</li>
            <li class="blank" onclick="show_more($(this))">多图上传</li>
            <li class="gray" onclick="show_online($(this))">图片库</li>
        </ul>
    </div>
    <!-- 单图上传 -->
    <div class="signle" style="text-align: center;">
        <form id="upload" action="<?=base_url().'Api/Upload/uploadOne';?>" method="POST" enctype="multipart/form-data">
            <input type="file" onchange="preview(this,'show')" class="upload" name="Filedata" id="file" />
            <div id="span_show"><img src="<?=HW_IMG?>add.png" alt="点击选择图片"></div>
            <div style="margin-top: 100px; padding-left: 175px">
                <div class="btn" style="background: #fff; color: #333" onclick="$('.upload').click();">选择图片</div>
                <button type="submit" class="btn sin_btn">上传图片</button>
            </div>
            <input type="hidden" name="count" value="1">
        </form>
    </div>

    <!-- 多图上传 -->
    <div class="many" style="text-align: center;">
        <form id="upload" action="<?=base_url().'Api/Upload/uploadFiles'?>" method="POST" enctype="multipart/form-data">
            
            <!-- <div class="state">
                <li style="float: left; border:none;">选中<span class="num">1</span>张图片</li>
                <li>开始上传</li>
                <li>继续添加</li>
            </div>> -->
            <div class="imgs" style="text-align: left;">
                <!-- <input id="fileId2" type="file" multiple="multiple" name="file" /> -->
            </div>
            <div style="padding-left: 175px;">
                <div class="button" onclick="addImg()">选择图片</div>
                <button class="button mul_btn" type="submit">上传图片</button>
            </div>
            <input type="hidden" name="count" value="">
        </form>
    </div>

    <!-- 在线图库 -->
    <div class="online">
        <form id="form_online" action="<?=base_url().'Api/Upload/upload_library';?>" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="selected_imgs">
            <div>
                <ul class="img_online">
                    <!-- <li><img src="" alt="暂无"></li>
                    <li><img src="" alt="暂无"></li>
                    <li><img src="" alt="暂无"></li>
                    <li><img src="" alt="暂无"></li>
                    <li><img src="" alt="暂无"></li>
                    <li><img src="" alt="暂无"></li> -->
                </ul>
                <div class="page">
                    <span class="fl">确定</span>
                    <span onclick="nextPage()">&gt;</span>
                    <span id="pageNum">1/1</span>
                    <span onclick="prePage()">&lt;</span>
                </div>
            </div>        
        </form>

    </div>
    <div class="wait hide">正在上传，请稍候...</div>

</div>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="<?=HW_UE?>dialogs/internal.js"></script>

<script type="text/javascript">
    var count = 0;
    var num = 0;
    var addImg = function addImg(){
        var tem = '<div style="border: 1px">'
                        +'<i onclick="del($(this))">×</i>'
                        +'<span id="span_'+count+'"><img alt="未选择图片"></span>'
                        +'<input onchange="preview(this,'+count+')" type="file" id="'+ count +'" name="'+ count +'[]" multiple="multiple">'
                    +'</div>';
        $('.imgs').append(tem);
        $('#'+count).click();
        count++;
        num++;
        $('input[name="count"]').val(num);
    }
    $('.imgs').on('click','span',function(){
        $(this).siblings('input').click();
    });
    var del = function(_this){
        _this.parent().remove();
        num--;
        $('input[name="count"]').val(num);
    }
    //本地图片预览
    function preview(file,num){  
        var span_id = "span_"+num;
        var prevDiv = document.getElementById(span_id); 
        if(file.files.length>1){
             prevDiv.innerHTML = '<img alt="共'+file.files.length+'张图片" />';
            // prevDiv.setAttribute("border":"1px");
            return;
        } 
        if (file.files && file.files[0]){  
            var reader = new FileReader();  
            reader.onload = function(evt){  
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';  
            }    
        reader.readAsDataURL(file.files[0]);  
        }  
        else{  
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
        }  
    } 
    //单图上传
    var show_one = function(_this){
        _this.removeClass('gray').addClass('blank');
        _this.siblings().removeClass('blank').addClass('gray');
        $('.many').hide();
        $('.online').hide();
        $('.signle').show();
    }
    //多图上传
    var show_more = function(_this){
        _this.removeClass('gray').addClass('blank');
        _this.siblings().removeClass('blank').addClass('gray');
        $('.many').show();
        $('.signle').hide();
        $('.online').hide();
    }
    //在线图库
    var allImgs = {},
        currentPage = 1,
        pages = 1;
        selectImgs = [];

    var show_online = function(_this){
        _this.removeClass('gray').addClass('blank');
        _this.siblings().removeClass('blank').addClass('gray');
        $('.many').hide();
        $('.signle').hide();
        $('.online').show();
        $('.img_online').find('li').remove();
        $.getJSON("<?=base_url().'Api/Upload/getLibraryImg';?>",function(json){
            pages = parseInt(parseInt(json.length+9)/10);
            allImgs = json;
            var limitNum = 0;
            $.each(allImgs,function(i,val){

                var tem = '<li>'
                            +'<img id="'+i+'" title="1" onclick="select($(this),'+i+',1)" src="'+ val.url +'" alt="暂无">'
                            +'<div class="mudle '+val.show+'" onclick="select($(this),'+i+',0)">已选中</div>'
                        +'</li>';
                if(limitNum < 10){       
                    $('.img_online').append(tem);
                }
                limitNum++;
            })
            // for (var i = 0; i < 10; i++) {

            // }
            $('#pageNum').text(currentPage+'/'+pages);
        })
    }
    //上一页
    var prePage = function(){
        currentPage--;
        if(currentPage==0){
            currentPage=1;
            return;
        }
        else{
            $('#pageNum').text(currentPage+'/'+pages);     
            var fr = (currentPage-1)*10,
                to = currentPage*10;
            $('.img_online').find('li').remove();
            for (var i = fr; i < to; i++) {
                var tem = '<li>'
                            +'<img id="'+i+'" title="1" onclick="select($(this),'+i+',1)" src="'+ allImgs[i]['url'] +'" alt="暂无">'
                            +'<div class="mudle '+allImgs[i]['show']+'" onclick="select($(this),'+i+',0)">已选中</div>'
                        +'</li>';
                $('.img_online').append(tem);
            }         
        }
    }
    //下一个
    var nextPage = function(){
        currentPage++;
        if(currentPage>pages){
            currentPage=pages
            return;
        }
        else{
            $('#pageNum').text(currentPage+'/'+pages);
            var fr = (currentPage-1)*10,
                to = currentPage*10;
            $('.img_online').find('li').remove();
            for (var i = fr; i < to; i++) {
                var tem = '<li>'
                            +'<img id="'+i+'" title="1" onclick="select($(this),'+i+',1)" src="'+ allImgs[i]['url'] +'" alt="暂无">'
                            +'<div class="mudle '+allImgs[i]['show']+'" onclick="select($(this),'+i+',0)">已选中</div>'
                            
                        +'</li>';
                $('.img_online').append(tem);
            }             
        }
    }

    //点击图片选中
    var select = function(_this,index,tit){ 
        if(tit > 0){
            allImgs[index]['show']="show";
            _this.siblings('.mudle').show();
            selectImgs.push(allImgs[index]['url']);
        }else{
            allImgs[index]['show']="hide";
            _this.hide();
            selectImgs.splice($.inArray(allImgs[index]['url'],selectImgs),1);
        }
        
    }

    //选中后提交
    $('.fl').on('click',function(){
        $('.wait').fadeIn();
        $('input[name="selected_imgs"]').val(selectImgs);
        $('#form_online').submit();

    })
    $('.sin_btn').on('click',function(){
        $('.wait').fadeIn();
    })
    $('.mul_btn').on('click',function(){
        $('.wait').fadeIn();
    })
    $('#span_show').on('click','img',function(){
        $('input[name="Filedata"]').click();
    })

</script>

</body>
</html>